<template>
  <div>
    <el-form :model="form" :label-width="props.width?props.width:'120px'" :inline="true">
      <el-row :gutter="20">
        <template v-for="item in props.fromLab">
          <el-col :span="6">
            <template v-if="item.type == 'input'">
              <el-form-item :label="item.label" >
                <el-input :placeholder='item.placeholder' v-model="form[item.field]" />
              </el-form-item>
            </template>
            <template v-if="item.type == 'select'">
              <el-form-item :label="item.label" :placeholder='item.placeholder'>
                <el-select v-model="form[item.field]">
                  <template v-for="items in item.selectdata">
                    <el-option :label="items.lable" :value="items.value" />
                  </template>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="item.type == 'date'">
              <el-form-item :label="item.label">
                <el-date-picker v-model="form[item.field]" :type="item.datetype" :placeholder='item.placeholder' />
              </el-form-item>
            </template>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="btn">
      <div class="btnItem"><el-button type="primary" @click="onSubmit()">查询</el-button></div>
      <div class="btnItem"><el-button type="primary" @click="onadd()">添加</el-button></div>
    </div>

  </div>
</template>

<script setup>
import { reactive } from "vue";
const props = defineProps({
  fromLab:Array,
  width:String
})
const emit = defineEmits(["onadd"])
let form = reactive({})
// console.log(props.fromLab)

for (const item of props.fromLab) {
  form[item.field] = ''
}
// console.log(form)

const onSubmit = () => {
  console.log(form);
};
const onadd = () =>{
  emit('onadd')
}
</script>
<style>
.btn {
  display: flex;
  flex-direction: row-reverse;
}

.btnItem {
  margin-right: 20px;
}
</style>
